<template>
    <view class="page-box">
        <header class="header"></header>
        <section class="section">
            <view class="form-box">
                <view class="customer-order-information column">
                    <text class="title row rowCenter verCenter">车辆信息：</text>
                    <view class="text-box row verCenter" style="margin-bottom: 12rpx;">
                        <view class="label">车主姓名：</view>
                        <text class="t1">{{detail.apply_name}}</text>
                    </view>
                    <view class="text-box row verCenter" style="margin-bottom: 12rpx;">
                        <view class="label">车牌号码：</view>
                        <text class="t1">{{detail.car_no}}</text>
                    </view>
                </view>
                <!-- 创建抵押工单 -->
                <template v-if="curr == 0">
                    <view class="form-title">主单信息</view>
                    <view class="form-item">
                        <view class="title required">联系人姓名：</view>
                        <view class="input-box row">
                            <input type="text" placeholder="请输入联系人姓名" placeholder-style="color: #6E767A;" class="uni-input" v-model="form.create_mortgage_work_order_contact_name" />
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="title">联系人身份：</view>
                        <view class="dropdown row bothSide verCenter">
                            <view class="dropdown-wrap">
                                <picker @change="bindPickerChange($event,1)" :value="create_mortgage_work_order_contact_identity_index" :range="create_mortgage_work_order_contact_identity" :range-key="'name'" style="width: 100%;">
                                    <view class="picker-wrap row bothSide verCenter" style="width: 100%;">
                                        <text class="uni-text" :style="create_mortgage_work_order_contact_identity_index == -1 ? { color: '#2E3233' } : {}">
                                            {{create_mortgage_work_order_contact_identity_index == -1 ?  '请选择联系人身份' : create_mortgage_work_order_contact_identity[create_mortgage_work_order_contact_identity_index].name}}
                                        </text>
                                    </view>
                                </picker>
                            </view>
                            <text class="dropdown-ico"></text>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="title">联系人电话：</view>
                        <view class="input-box row">
                            <input type="text" placeholder="请输入联系人电话" placeholder-style="color: #6E767A;" class="uni-input" v-model="form.create_mortgage_work_order_contact_phone" />
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="title">业务类型：</view>
                        <view class="dropdown row bothSide verCenter">
                            <view class="dropdown-wrap">
                                <picker @change="bindPickerChange($event,2)" :value="create_mortgage_work_order_business_type_index" :range="create_mortgage_work_order_business_type" :range-key="'name'" style="width: 100%;">
                                    <view class="picker-wrap row bothSide verCenter" style="width: 100%;">
                                        <text class="uni-text" :style="create_mortgage_work_order_business_type_index == -1 ? { color: '#2E3233' } : {}">
                                            {{create_mortgage_work_order_business_type_index == -1 ?  '请选择业务类型' : create_mortgage_work_order_business_type[create_mortgage_work_order_business_type_index].name}}
                                        </text>
                                    </view>
                                </picker>
                            </view>
                            <text class="dropdown-ico"></text>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="title">期待会面时间：</view>
                        <view class="dropdown row bothSide verCenter">
                            <view class="dropdown-wrap">
                                <picker mode="date" @change="bindPickerChange($event,3)" style="width: 100%;">
                                    <view class="picker-wrap row bothSide verCenter" style="width: 100%;">
                                        <text class="uni-text" :style="form.create_mortgage_work_order_expect_meeting_date ? {} : {color: '#2E3233'}">{{form.create_mortgage_work_order_expect_meeting_date || '请选择会面时间'}}</text>
                                    </view>
                                </picker>
                            </view>
                            <text class="dropdown-ico"></text>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="title">办理地址：</view>
                        <view class="dropdown row bothSide verCenter">
                            <view class="dropdown-wrap">
                                <view class="dropdown-wrap">
                                    <uni-data-picker :localdata="region" placeholder="请选择所在城市" popup-title="请选择城市" v-model="create_mortgage_work_order_deal_addr" @change="onchange" @nodeclick="onnodeclick($event,1)"></uni-data-picker>
                                </view>
                            </view>
                            <text class="dropdown-ico"></text>
                        </view>
                        <view class="textarea-box row" style="margin-top: 12rpx;">
                            <textarea class="uni-textarea" placeholder="请输入详细地址" placeholder-style="color: #6E767A;" v-model="form.create_mortgage_work_order_deal_addr_detail"></textarea>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="title">资料交付方式：</view>
                        <view class="dropdown row bothSide verCenter">
                            <view class="dropdown-wrap">
                                <picker @change="bindPickerChange($event,4)" :value="create_mortgage_work_order_stuff_delivery_type_index" :range="create_mortgage_work_order_stuff_delivery_type" :range-key="'name'" style="width: 100%;">
                                    <view class="picker-wrap row bothSide verCenter" style="width: 100%;">
                                        <text class="uni-text" :style="create_mortgage_work_order_stuff_delivery_type_index == -1 ? { color: '#2E3233' } : {}">
                                            {{create_mortgage_work_order_stuff_delivery_type_index == -1 ?  '请选择资料交付方式' : create_mortgage_work_order_stuff_delivery_type[create_mortgage_work_order_stuff_delivery_type_index].name}}
                                        </text>
                                    </view>
                                </picker>
                            </view>
                            <text class="dropdown-ico"></text>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="title">工单备注：</view>
                        <view class="textarea-box row">
                            <textarea class="uni-textarea" placeholder="请输入工单备注" placeholder-style="color: #6E767A;" v-model="form.create_mortgage_work_order_remark"></textarea>
                        </view>
                    </view>
                </template>
                <!-- 创建装GPS工单 -->
                <template v-else-if="curr == 1">
                    <view class="form-title">派单信息</view>
                    <view class="form-item">
                        <view class="title required">预约安装时间：</view>
                        <view class="dropdown row bothSide verCenter">
                            <view class="dropdown-wrap">
                                <picker mode="date" @change="bindPickerChange($event,5)" style="width: 100%;">
                                    <view class="picker-wrap row bothSide verCenter" style="width: 100%;">
                                        <text class="uni-text" :style="form.create_gps_work_order_schedule_install_date ? {} : {color: '#2E3233'}">{{form.create_gps_work_order_schedule_install_date || '请选择日期'}}</text>
                                    </view>
                                </picker>
                            </view>
                            <text class="dropdown-ico"></text>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="title required">联系人姓名：</view>
                        <view class="input-box row">
                            <input type="text" placeholder="请输入联系人姓名" placeholder-style="color: #6E767A;" class="uni-input" v-model="form.create_gps_work_order_contact_name" />
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="title">联系人身份：</view>
                        <view class="dropdown row bothSide verCenter">
                            <view class="dropdown-wrap">
                                <picker @change="bindPickerChange($event,6)" :value="create_gps_work_order_contact_identity_index" :range="create_gps_work_order_contact_identity" :range-key="'name'" style="width: 100%;">
                                    <view class="picker-wrap row bothSide verCenter" style="width: 100%;">
                                        <text class="uni-text" :style="create_gps_work_order_contact_identity_index == -1 ? { color: '#2E3233' } : {}">
                                            {{create_gps_work_order_contact_identity_index == -1 ?  '请选择联系人身份' : create_gps_work_order_contact_identity[create_gps_work_order_contact_identity_index].name}}
                                        </text>
                                    </view>
                                </picker>
                            </view>
                            <text class="dropdown-ico"></text>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="title">联系人电话：</view>
                        <view class="input-box row">
                            <input type="text" placeholder="请输入联系人电话" placeholder-style="color: #6E767A;" class="uni-input" v-model="form.create_gps_work_order_contact_phone" />
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="title">门店名称：</view>
                        <view class="input-box row">
                            <input type="text" placeholder="请输入门店名称" placeholder-style="color: #6E767A;" class="uni-input" v-model="form.create_gps_work_order_store_name" />
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="title">安装地址：</view>
                        <view class="dropdown row bothSide verCenter">
                            <view class="dropdown-wrap">
                                <view class="dropdown-wrap">
                                    <uni-data-picker :localdata="region" placeholder="请选择所在城市" popup-title="请选择城市" v-model="create_gps_work_order_install_addr" @change="onchange" @nodeclick="onnodeclick($event,2)"></uni-data-picker>
                                </view>
                            </view>
                            <text class="dropdown-ico"></text>
                        </view>
                        <view class="textarea-box row" style="margin-top: 12rpx;">
                            <textarea class="uni-textarea" placeholder="请输入详细地址" placeholder-style="color: #6E767A;" v-model="form.create_gps_work_order_install_addr_detail"></textarea>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="title">工单备注：</view>
                        <view class="textarea-box row">
                            <textarea class="uni-textarea" placeholder="请输入工单备注" placeholder-style="color: #6E767A;" v-model="form.create_gps_work_order_remark"></textarea>
                        </view>
                    </view>
                </template>
            </view>
            <view class="btn row rowCenter verCenter" @click="submit()">{{text}}</view>
        </section>
    </view>
</template>

<script>
    import { API } from '@/util/api.js';
    export default {
        data() {
            return {
                text: '下一步',
                curr: 0,
                detail: {},
                orderInfo: {},
                region: [], //城市列表
                create_mortgage_work_order_contact_identity: [{ name: '业务员', value: '1' }, { name: '客户本人', value: '2' }],
                create_mortgage_work_order_contact_identity_index: -1,
                create_mortgage_work_order_business_type: [{ name: '抵押', value: '1' }, { name: '解押', value: '2' }],
                create_mortgage_work_order_business_type_index: -1,
                create_mortgage_work_order_stuff_delivery_type: [{ name: '车管所会面', value: '1' }, { name: '快递邮寄', value: '2' }],
                create_mortgage_work_order_stuff_delivery_type_index: -1,
                create_gps_work_order_contact_identity: [{ name: '业务员', value: '1' }, { name: '客户本人', value: '2' }],
                create_gps_work_order_contact_identity_index: -1,
                create_mortgage_work_order_deal_addr: 0,
                create_gps_work_order_install_addr: 0,
                form: {
                    "order_id": "",
                    "create_mortgage_work_order_contact_name": "",
                    "create_mortgage_work_order_contact_identity": "",
                    "create_mortgage_work_order_contact_phone": "",
                    "create_mortgage_work_order_business_type": "",
                    "create_mortgage_work_order_expect_meeting_date": "",
                    "create_mortgage_work_order_deal_addr_province": "",
                    "create_mortgage_work_order_deal_addr_city": "",
                    "create_mortgage_work_order_deal_addr_district": "",
                    "create_mortgage_work_order_deal_addr_detail": "",
                    "create_mortgage_work_order_stuff_delivery_type": "",
                    "create_mortgage_work_order_remark": "",
                    "create_gps_work_order_schedule_install_date": "",
                    "create_gps_work_order_contact_name": "",
                    "create_gps_work_order_contact_identity": "",
                    "create_gps_work_order_contact_phone": "",
                    "create_gps_work_order_store_name": "",
                    "create_gps_work_order_install_addr_province": "",
                    "create_gps_work_order_install_addr_city": "",
                    "create_gps_work_order_install_addr_district": "",
                    "create_gps_work_order_install_addr_detail": "",
                    "create_gps_work_order_remark": ""
                }
            };
        },
        onLoad(options) {
            this.form.order_id = options.order_id;
            this.getRegion();
            this.getOrderDetail();
            this.getOrderAddedInfo();
        },
        methods: {
            /**
             * 监听城市
             * @param {Object} e
             */
            onchange(e) {

            },
            /**
             * 选择城市
             * @param {Object} node
             * @param {Object} type 1主单信息 2派单信息
             */
            onnodeclick(node, type) {
                console.log(node)
                if (type == 1) {
                    if (node.level == 1) {
                        this.form.create_mortgage_work_order_deal_addr_province = node.value;
                    } else if (node.level == 2) {
                        this.form.create_mortgage_work_order_deal_addr_city = node.value;
                    } else if (node.level == 3) {
                        this.form.create_mortgage_work_order_deal_addr_district = node.value;
                    }
                } else if (type == 2) {
                    if (node.level == 1) {
                        this.form.create_gps_work_order_install_addr_province = node.value;
                    } else if (node.level == 2) {
                        this.form.create_gps_work_order_install_addr_city = node.value;
                    } else if (node.level == 3) {
                        this.form.create_gps_work_order_install_addr_district = node.value;
                    }
                }
            },
            bindPickerChange(e, type) {
                const value = e.detail.value;
                const typeMap = {
                    1: { index: 'create_mortgage_work_order_contact_identity_index', field: 'create_mortgage_work_order_contact_identity' },
                    2: { index: 'create_mortgage_work_order_business_type_index', field: 'create_mortgage_work_order_business_type' },
                    3: { field: 'create_mortgage_work_order_expect_meeting_date' },
                    4: { index: 'create_mortgage_work_order_stuff_delivery_type_index', field: 'create_mortgage_work_order_stuff_delivery_type' },
                    5: { field: 'create_gps_work_order_schedule_install_date' },
                    6: { index: 'create_gps_work_order_contact_identity_index', field: 'create_gps_work_order_contact_identity' }
                };

                if (typeMap[type]) {
                    if (type === 3 || type === 5) {
                        // 处理日期选择
                        this.form[typeMap[type].field] = e.detail.value;
                    } else {
                        // 更新索引
                        this[typeMap[type].index] = value;
                        // 更新表单字段
                        this.form[typeMap[type].field] = this[typeMap[type].field][value].value;
                    }
                }
            },
            /**
             * 获取地址
             */
            getRegion() {
                this.request(API.getRegion, 'GET', { get_pcd: 1 }, true).then(res => {
                    if (res.code === 0) {
                        this.region = res.data[0].children;
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 获取进件信息
             */
            getOrderDetail() {
                this.request(API.orderDetail, 'GET', { order_id: this.form.order_id }, true).then(res => {
                    if (res.code === 0) {
                        this.detail = res.data;
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 获取进件已经填写的资料
             */
            getOrderAddedInfo() {
                this.request(API.getOrderAddedInfo, 'GET', { order_id: this.form.order_id }, true).then(res => {
                    Object.keys(res).forEach(key => {
                        if (this.form.hasOwnProperty(key)) {
                            this.form[key] = res[key];
                            this.create_mortgage_work_order_deal_addr = res.create_mortgage_work_order_deal_addr_district * 1;
                            this.create_gps_work_order_install_addr = res.create_gps_work_order_install_addr_district * 1;
                            // 处理特殊字段，如create_mortgage_work_order_contact_identity
                            if (key === 'create_mortgage_work_order_contact_identity') {
                                const index = this.create_mortgage_work_order_contact_identity.findIndex(item => item.value == res[key]);
                                if (index !== -1) {
                                    this.create_mortgage_work_order_contact_identity_index = index;
                                }
                            }

                            // 处理create_mortgage_work_order_business_type字段
                            if (key === 'create_mortgage_work_order_business_type') {
                                const index = this.create_mortgage_work_order_business_type.findIndex(item => item.value == res[key]);
                                if (index !== -1) {
                                    this.create_mortgage_work_order_business_type_index = index;
                                }
                            }

                            // 处理create_mortgage_work_order_stuff_delivery_type字段
                            if (key === 'create_mortgage_work_order_stuff_delivery_type') {
                                const index = this.create_mortgage_work_order_stuff_delivery_type.findIndex(item => item.value == res[key]);
                                if (index !== -1) {
                                    this.create_mortgage_work_order_stuff_delivery_type_index = index;
                                }
                            }

                            // 处理create_gps_work_order_contact_identity字段
                            if (key === 'create_gps_work_order_contact_identity') {
                                const index = this.create_gps_work_order_contact_identity.findIndex(item => item.value == res[key]);
                                if (index !== -1) {
                                    this.create_gps_work_order_contact_identity_index = index;
                                }
                            }


                        }
                    });
                });
            },
            submit() {
                if (this.curr === 0) {
                    // 当前是第一步，点击后进入第二步
                    this.curr = 1;
                    this.text = '提交';
                    uni.setNavigationBarTitle({
                        title: '创建装GPS工单'
                    })
                } else if (this.curr === 1) {
                    // 当前是第二步，点击后提交数据
                    this.request(API.submitVehicleHandlingAddInfo, 'POST', this.form, true).then(res => {
                        if (res.code === 0) {
                            uni.showToast({
                                title: '提交成功',
                                icon: 'success',
                                duration: 2000
                            });
                            // 等待2秒后再回到上一页
                            setTimeout(() => {
                                uni.redirectTo({
                                    url: "/pages/order/selfDetail?order_id=" + this.form.order_id
                                })
                            }, 2000);
                        } else {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            });
                        }
                    }).catch(error => {
                        console.error('提交失败:', error);
                        uni.showToast({
                            title: '提交失败，请重试',
                            icon: 'none'
                        });
                    });
                }
            }
        }
    };
</script>

<style scoped lang="scss">
    @import '@/assets/css/order/vehicleHandlingAddInfo.scss';
</style>